<template>
  <view class="register-container">
    <view class="register-header">
      <text class="title">注册账号</text>
    </view>
    
    <view class="register-form">
      <!-- 账号输入 -->
      <view class="form-item">
        <text class="label">账号</text>
        <view class="input-wrapper">
          <input 
            type="text" 
            v-model="username" 
            placeholder="请输入账号" 
            maxlength="20"
            @input="validateUsername"
          />
        </view>
        <text class="error-tip" v-if="usernameError">{{ usernameError }}</text>
      </view>
      
      <!-- 密码输入 -->
      <view class="form-item">
        <text class="label">密码</text>
        <view class="input-wrapper">
          <input 
            :type="showPassword ? 'text' : 'password'" 
            v-model="password" 
            placeholder="请输入密码" 
            @input="validatePassword"
          />
          <text 
            class="iconfont" 
            :class="showPassword ? 'icon-eye-open' : 'icon-eye-close'"
            @click="togglePassword"
          ></text>
        </view>
        <text class="error-tip" v-if="passwordError">{{ passwordError }}</text>
      </view>
      
      <!-- 确认密码 -->
      <view class="form-item">
        <text class="label">确认密码</text>
        <view class="input-wrapper">
          <input 
            :type="showConfirmPassword ? 'text' : 'password'" 
            v-model="confirmPassword" 
            placeholder="请再次输入密码" 
            @input="validateConfirmPassword"
          />
          <text 
            class="iconfont" 
            :class="showConfirmPassword ? 'icon-eye-open' : 'icon-eye-close'"
            @click="toggleConfirmPassword"
          ></text>
        </view>
        <text class="error-tip" v-if="confirmPasswordError">{{ confirmPasswordError }}</text>
      </view>
      
      <!-- 注册按钮 -->
      <button 
        class="register-btn" 
        :disabled="!canRegister"
        @click="handleRegister"
      >
        注册
      </button>
      
      <!-- 登录入口 -->
      <view class="login-entry">
        <text>已有账号？</text>
        <text class="link" @click="goToLogin">立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      showPassword: false,
      showConfirmPassword: false,
      
      // 错误提示
      usernameError: '',
      passwordError: '',
      confirmPasswordError: '',
    }
  },
  computed: {
    // 是否可以注册
    canRegister() {
      return (
        this.username &&
        this.password &&
        this.confirmPassword &&
        !this.usernameError &&
        !this.passwordError &&
        !this.confirmPasswordError
      )
    }
  },
  methods: {
    // 验证账号
    validateUsername() {
      if (!this.username) {
        this.usernameError = '请输入账号'
      } else if (this.username.length < 4) {
        this.usernameError = '账号长度不能少于4位'
      } else {
        this.usernameError = ''
      }
    },
    
    // 验证密码
    validatePassword() {
      if (!this.password) {
        this.passwordError = '请输入密码'
      } else if (this.password.length < 6) {
        this.passwordError = '密码长度不能少于6位'
      } else {
        this.passwordError = ''
      }
      // 如果确认密码已输入，则验证确认密码
      if (this.confirmPassword) {
        this.validateConfirmPassword()
      }
    },
    
    // 验证确认密码
    validateConfirmPassword() {
      if (!this.confirmPassword) {
        this.confirmPasswordError = '请再次输入密码'
      } else if (this.confirmPassword !== this.password) {
        this.confirmPasswordError = '两次输入的密码不一致'
      } else {
        this.confirmPasswordError = ''
      }
    },
    
    // 切换密码显示状态
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    // 切换确认密码显示状态
    toggleConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    
    // 处理注册
    async handleRegister() {
      if (!this.canRegister) return
      
      try {
        const res = await uniCloud.callFunction({
          name: 'register',
          data: {
            username: this.username,
            password: this.password
          }
        })
        
        if (res.result.code === 0) {
          // 注册成功，保存用户信息并跳转
          const userInfo = res.result.data
          uni.setStorageSync('userInfo', userInfo)
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: res.result.msg || '注册失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '注册失败，请稍后重试',
          icon: 'none'
        })
      }
    },
    
    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style>
.register-container {
  min-height: 100vh;
  background-color: #fff;
  padding: 40rpx;
}

.register-header {
  margin-bottom: 60rpx;
}

.register-header .title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

.register-form {
  margin-top: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item .label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.input-wrapper {
  position: relative;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
}

.input-wrapper input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.input-wrapper .iconfont {
  font-size: 32rpx;
  color: #999;
  margin-left: 20rpx;
}

.error-tip {
  font-size: 24rpx;
  color: #f44336;
  margin-top: 10rpx;
}

.register-btn {
  background-color: #4a6ee0;
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx 0;
  border-radius: 8rpx;
  margin-top: 40rpx;
}

.register-btn[disabled] {
  background-color: #ccc;
}

.login-entry {
  text-align: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.login-entry .link {
  color: #4a6ee0;
}
</style> 